<template>
  <map id="map" :longitude="113.354520" :latitude="23.099994"></map>
</template>

<script lang="ts"  setup>
import Taro from "@tarojs/taro";
import { useDidShow } from "@tarojs/taro";
import useOrderStore from '@/store/order'
import { ref } from "vue";

const orderStore = useOrderStore()
const MapContext = ref<any>({});

useDidShow(() => {
  let _this = this;

  MapContext.value = Taro.createMapContext("map", _this);
  MapContext.value.moveToLocation({ longitude: orderStore.logisticsInfo.trajectorys[0].lat, latitude: orderStore.logisticsInfo.trajectorys[0].lng })

  MapContext.value.addMarkers({
    markers: [
      {
        iconPath: require("../../assets/images/货物跟踪.png"),
        id: 0,
        latitude: orderStore.logisticsInfo.trajectorys[0].lng,
        longitude: orderStore.logisticsInfo.trajectorys[0].lat,
        width: 25,
        height: 25
      },
      {
        iconPath: require("../../assets/images/icon_收_32pt@2x.png"),
        id: 1,
        latitude: orderStore.logisticsInfo.eLng,
        longitude: orderStore.logisticsInfo.eLat,
        width: 50,
        height: 50
      },
      {
        iconPath: require("../../assets/images/icon_发货.png"),
        id: 2,
        latitude: orderStore.logisticsInfo.sLng,
        longitude: orderStore.logisticsInfo.sLat,
        width: 50,
        height: 50
      }
    ],
    fail: function (err) {
      console.log(err)
    }
  })
});
</script>



<style lang="scss">
#map {
  width: 100vw;
}
</style>